
// 添加自定义指令(main.js 引入)
// Vue.directive(指令名,指令的配置对象)
export const imgerror = {
  // 这里配置一些钩子函数
  // 这里的钩子,是指那些被使用当前指令的dom的生命周期
  inserted(dom, options) {
    if (!dom.src) {
      dom.src = options.value
    }
    // 这个钩子会在dom被插入父组件的时候触发
    // 可以接受两个参数
    // 1.当前的dom
    // 2.当前的指令配置
    // console.log('这里是dom', dom)
    // console.log('这里是options', options)
    // 接下来只需定义他的错误处理,修改src即可

    // HTML DOM onerror 事件句柄 在装载图像的过程中发生错误时调用的事件句柄。
    dom.onerror = function() {
      // dom.src = 备用的图片地址
      dom.src = options.value
    }
  },
  // 上一个 inserted 钩子是在dom插入页面是触发
  // 但是如同 表格翻页, 或者排序重新加载等情况
  // 有另外一个钩子 componentUpdated
  componentUpdated(dom, options) {
    if (!dom.src) {
      dom.src = options.value
    }
  }
}
